<!-- 实物奖品列表 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{searchData = {}}" searchConditionNum="6">
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['awardType']" placeholder="商品类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">卡券</a-select-option>
            <a-select-option :value="1">实物</a-select-option>
            <a-select-option :value="2">虚拟券</a-select-option>
          </a-select>
        </a-form-item>
   
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['isFlag']" placeholder="商品状态">
            <a-select-option :value="2">上架</a-select-option>
            <a-select-option :value="1">下架</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-date-picker v-model:value="searchData['sTime']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="'卡卷开始时间'" style="width: 100%;" />
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-date-picker v-model:value="searchData['eTime']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="'卡卷结束时间'" style="width: 100%;" />
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'num'">
            {{ (record.num || 0) + '/' + (record.getNum || 0) }}
          </template>
          <template v-if="column.key === 'type'">
            {{ record.type ==0 ? '福分商城':'权益商城' }}
          </template>
          <template v-if="column.key === 'goodsType'">
            <span v-if="record.awardType === 0">卡券</span>
            <span v-else-if="record.awardType === 1">实物</span>
            <span v-else="record.awardType === 2">虚拟券</span>
          </template>
          <template v-if="column.key === 'couponAmount'">
            {{ record.couponAmount/100 }}
          </template>
          <template v-if="column.key === 'isFlag'">
            <GzTableColState :state="record.isFlag === 1 ? 0 : 1" :show-switch-type="$access('ENT_SCORE_EQUITY_MALL_INFO_EDIT')" :on-change="(state) => { return onSwitchChange(record.scoreExchangeId, record.isFlag)}" />
          </template>
          <template v-if="column.key === 'price'">
            {{ record.price/100 }}
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_SCORE_EQUITY_MALL_INFO_EXCHANGE_RECORDS')" type="link" @click="detailFunc(record)">查看兑换明细</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <Detail ref="detailRef" :acceptDa="acceptDa" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import Detail from './Detail.vue'
import {$getScoreList,$scoreState} from '../../../api/score/scoreMall/index'
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const detailRef = ref()
const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'goodsType', title: '商品类型', dataIndex: 'goodsType', width: 120, minWidth: 120, maxWidth: 150 },
  { key: 'type', title: '活动类型', dataIndex: 'type', width: 200, minWidth: 120, maxWidth: 200 },
  { key: 'name', title: '商品名称', dataIndex: 'name', width: 200, minWidth: 120, maxWidth: 200 },
  { key: 'price', title: '商品价值', dataIndex: 'price', width: 120, minWidth: 120, maxWidth: 150 },
  { key: 'scoreNeed', title: '商品兑换所需福分', dataIndex: 'scoreNeed',  width: 160, minWidth: 160, maxWidth: 200 },
  { key: 'num', title: '总数量/已领取数量', dataIndex: 'num', width: 170, minWidth: 170, maxWidth: 220 },
  { key: 'syNum', title: '商品剩余数量', dataIndex: 'syNum', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'agentName', title: '创建机构', dataIndex: 'agentName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'appName', title: '归属小程序', dataIndex: 'appName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'isFlag', title: '状态', dataIndex: 'isFlag', width: 90, minWidth: 90, maxWidth: 120 },
  { key: 'sTime', title: '卡券开始时间', dataIndex: 'sTime', width: 170, minWidth: 90, maxWidth: 120 },
  { key: 'eTime', title: '卡券结束时间', dataIndex: 'eTime', width: 170, minWidth: 90, maxWidth: 120 },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData = ref({
  awardType: '', // 商品类型
  type: 1, // 权益商城
  sTime: null, // 开始时间
  eTime: null // 结束时间
})  as any

// 用来接收参数
const acceptDa = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $getScoreList(params)
}
/**
 * 搜索条件
 */
function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 详情
 */
function detailFunc(record){
  acceptDa.value = record
  detailRef.value.show(record.awardType,record.scoreExchangeId)
}
/**
 * 商品上下架
 */
function onSwitchChange(scoreExchangeId, isFlag) {
  isFlag = isFlag === 1 ? 2 : 1
  const title = isFlag === 2 ? '确认[启用]该商品？' : '确认[停用]该商品？'
  const content = isFlag === 2 ? '启用后，该商品将会上架，用户可在线兑换。' : '停用后，该商品将会下架，用户不可在线兑换。'
  return new Promise<void>((resolve, reject) => {
    $infoBox.confirmDanger(title, content, () => {
      return $scoreState({ scoreExchangeId, isFlag }).then(res => {
        infoTableRef.value.refTable()
        resolve()
      }).catch(err => reject(err))
    }, () => {
      reject(new Error())
    })
  })
}
</script>
